<template>
    <div>
        <el-dialog title="登录" :visible.sync="loginVisible" width="300px" center>

            <el-form :model="loginForm" :rules="loginFormRules" ref="loginForm" class="demo-ruleForm">
                <el-form-item prop="userName">
                    <el-input placeholder="请输入账号" prefix-icon="el-icon-user-solid"
                              v-model="loginForm.userName"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" prefix-icon="el-icon-view"
                              v-model="loginForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onLogin" type="primary" size="medium" style="width: 100%">登录</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import usersAPI from "../request/api/usersAPI";
import {mapGetters} from "vuex";

export default {
    name: "Login",
    data() {
        //字母开头,长度5-16之间,允许字母数字下划线
        let validate = (rule, value, callback) => {
            if (!/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(value)) {
                callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"))
            }else {
                callback();
            }
        };
        return {
            loginForm: {
                userName: "",
                password: ""
            },
            loginFormRules: {
                userName: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {validator: validate, trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {validator: validate, trigger: 'blur'}
                ],
            }
        }
    },
    computed: {
        /*loginVisible(){//只是读操作
            return this.$store.getters.getShowLogin
        },*/
        //把loginVisible变成完整的计算属性
        loginVisible: {
            get(){//读的时候会触发这个get方法
                console.log("this.$store.getters.getShowLogin",this.$store.getters.getShowLogin)
                //获取vuex中的getShowLogin
                return this.$store.getters.getShowLogin
            },
            set(value){//写的时候会触发这个方法
                //把最新的值在更新到vuex中保持数据的一致性
                this.$store.commit("setShowLogin", value)
            }
        }
    },
    methods: {
        onLogin() {
            this.$refs.loginForm.validate(async (valid) => {
                //如果没有通过校验就返回
                if (!valid) return;
                //如果通过了校验那么就去发送登录请求
                let {data: res} = await usersAPI.login(this.loginForm);
                if (res.code !== "001") {
                    this.$notifyError(res.msg);
                } else {
                    //登录对话框隐藏
                    this.loginVisible = false;
                    //把当前用户的用户名存储到vuex中
                    this.$store.commit("setUser",res.user)
                    //把返回的信息存储到本次缓存
                    window.localStorage.setItem("user", JSON.stringify(res.user))
                    this.$notifySuccess(res.msg)
                }
            });
        }
    }
}
</script>

<style scoped>

</style>